<template>
  <div class="content" :class="onOff ? 'onHeight' : 'offHeight'">
    <div class="top">
      <div class="btn-box">
        <img
          src="https://akk.028wkf.cn/kdb-weapp-img/data-img/kefu-phone.png"
          mode="widthFix"
          @click="callClick"
        />
        <img
          src="https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/icon/new-xiaoxi.png"
          mode="widthFix"
          class="newWordImg"
          @click="handleLinkNew"
        />
      </div>
      <div class="order-link">
        <div
          v-for="(item,index) in orderType"
          :key="index"
          @click="orderLinkClick(item.tab)"
        >
          <p>{{ orderCountForm[item.key] }}</p>
          <span>{{ item.name }}</span>
        </div>
      </div>
      <div class="bottom">
        <i-icon class="icon" type="systemprompt" size="28" color="#1296db" />
        <div>
          <p>开店宝10条抗疫扶持细则解读</p>
        </div>
      </div>
    </div>
    <div class="quick">
      <div v-for="(item,index) in quicList" :key="index">
        <p class="hint">{{item.title}}</p>
        <div class="list">
          <div v-for="(e,i) in item.list" :key="i" @click="navLinkClick(e)">
            <img :src="e.img" mode="widthFix" />
            <span>{{e.label}}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="switch-box">
      <img
        src="https://akk.028wkf.cn/kdb-weapp-img/data-img/switch-left-img.png"
        mode="scaleToFill"
      />
      <switch :checked="onOff" @change="onSwitchChange"></switch>
    </div>
    <div class="is-switch-show-box" v-show="onOff">
      <div class="checkbox-box" v-show="isShowAddData">
        <div>
          <i-checkbox-group @change="handleFruitChange">
            <i-checkbox
              v-for="(item,index) in checkboxList"
              :key="index"
              :value="item.label"
              :checked="item.isCheck"
              position="left"
              color="#5b94f6"
            ></i-checkbox>
          </i-checkbox-group>
        </div>
        <button class="btn" @click="affirmShowDataClick">确认</button>
      </div>
      <div class="zz" v-if="isShowAddData"></div>

      <div class="data-list">
        <div v-for="(item,index) in dataList" :key="index" v-show="item.isShow">
          <div class="top">
            <img :src="item.img" mode="widthFix" />
            <span>{{item.title}}</span>
          </div>
          <div class="dataContent">
            <div
              v-for="(e,i) in item.list"
              :key="i"
              @click="linkDataClick(e.key, item.isClick)"
            >
              <img :src="e.img" mode="widthFix" />
              <div>
                <p>{{e.value}}</p>
                <span>{{e.label}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="add-data-btn" @click="addDataClick">
        <p>+</p>
        <span>添加数据</span>
      </div>
    </div>
    <img
      class="toll-link"
      src="https://akk.028wkf.cn/kdb-weapp-img/data-img/marketing-banner.png"
      mode="scaleToFill"
      @click="buyMarketingLinkClick"
    />

    <div class="kong"></div>
    <vue-tab-bar
      @fetch-index="clickIndexNav"
      :selectNavIndex="selectNavIndex"
      :needButton="needButton"
    ></vue-tab-bar>
  </div>
</template>

<script>
import vueTabBar from '@/components/vueTabBar'

import {
  FIND_SHOP_BASE_INFO,
  FIND_SHOP_ORDER_PAGE,
  SHOP_SALES_COUNT_DAY, // 店铺每天订单统计
  COUNT_MONTHLY_REBATE_API_DAY, // 每天返佣统计
  SHOP_EVALUATION_COUNT, // 评分率
  SHOP_COLLECTION_COUNT, // 收藏数
  NEW_SHARE_DATA_COUNT, // 查询店铺推荐数据汇总
  NEW_CUSTOMER_TOTAL // 新查会员
} from '@/api'
import { dateFormatter } from '@/utils'

export default {
  components: { vueTabBar },
  props: {},
  data () {
    return {
      orderType: [
        { name: '待付款', key: '0', tab: 'tab1' },
        { name: '待发货', key: '1', tab: 'tab2' },
        { name: '已收货', key: '3,7', tab: 'tab3' },
        { name: '退款/售后', key: '4,5,8', tab: 'tab4' }
      ],
      orderCountForm: {
        '1': 0,
        '0': 0,
        '3,7': 0,
        '4,5,8': 0
      },
      selectNavIndex: 0,
      needButton: true,
      shopIdentity: '',
      dataForm: {},
      countForm: {
        collect: null,
        shopAssessAvg: null
      },
      promoteForm: {},
      onOff: false,
      showDataForm: {
        revenue: false,
        viscosity: false,
        generalize: false
      },
      isShowAddData: false
    }
  },
  computed: {
    account () {
      return this.$store.state.account
    },
    quicList () {
      return [
        {
          title: '快捷功能',
          list: [
            // 无扫码核销 home-smhx
            {
              label: '收款码',
              img: 'https://akk.028wkf.cn/kdb-weapp-img/data-img/home-skm.png',
              link: '/pages/mine/shop-config/qr-code/main',
              isJurisdiction: true
            },
            {
              label: '店铺二维码',
              img:
                'https://akk.028wkf.cn/kdb-weapp-img/data-img/home-dpewm.png',
              link: '/pages/mine/shop-config/qr-code-shop/main',
              isJurisdiction: this.shopIdentity !== 'PERSONAL'
            },
            {
              label: '数据分析',
              img: 'https://akk.028wkf.cn/kdb-weapp-img/data-img/home-sjfx.png',
              link: '/pages/data-analyze/data-echarts/main',
              isJurisdiction: this.shopIdentity !== 'PERSONAL'
            }
          ]
        }
      ]
    },
    dataList () {
      return [
        {
          title: '营收数据',
          isShow: this.showDataForm.revenue,
          isClick: true,
          img: 'https://akk.028wkf.cn/kdb-weapp-img/data-img/revenue-title.png',
          list: [
            {
              label: '销售额',
              value: this.dataForm.orderAmount,
              img: 'https://akk.028wkf.cn/kdb-weapp-img/data-img/revenue1.png',
              key: 'orderAmount'
            },
            {
              label: '订单数',
              // value: this.dataForm.orderNum,
              value: this.orderCountForm['3,7'],
              img: 'https://akk.028wkf.cn/kdb-weapp-img/data-img/revenue2.png',
              key: 'orderNum'
            },
            {
              label: '返佣金额',
              value: this.dataForm.rebateAmount,
              img: 'https://akk.028wkf.cn/kdb-weapp-img/data-img/revenue3.png',
              key: 'rebateAmount'
            }
          ]
        },
        {
          title: '用户粘度',
          isShow: this.showDataForm.viscosity,
          isClick: false,
          img: 'https://akk.028wkf.cn/kdb-weapp-img/data-img/user-title.png',
          list: [
            {
              label: '收藏量',
              value: this.countForm.collect,
              img: 'https://akk.028wkf.cn/kdb-weapp-img/data-img/user1.png'
            },
            {
              label: '好评',
              value: this.countForm.shopAssessAvg,
              img: 'https://akk.028wkf.cn/kdb-weapp-img/data-img/user2.png'
            }
          ]
        },
        {
          title: '推广数据',
          isShow: this.showDataForm.generalize,
          isClick: false,
          img:
            'https://akk.028wkf.cn/kdb-weapp-img/data-img/generalize-title.png',
          list: [
            {
              label: '会员',
              value: this.promoteForm.memberCount
                ? this.promoteForm.memberCount
                : 0,
              img:
                'https://akk.028wkf.cn/kdb-weapp-img/data-img/generalize1.png'
            },
            {
              label: '直推店会员',
              value: this.promoteForm.oneShareShopMemberCount
                ? this.promoteForm.oneShareShopMemberCount
                : 0,
              img:
                'https://akk.028wkf.cn/kdb-weapp-img/data-img/generalize2.png'
            },
            {
              label: '间推店会员',
              value: this.promoteForm.twoShareShopMemberCount
                ? this.promoteForm.twoShareShopMemberCount
                : 0,
              img:
                'https://akk.028wkf.cn/kdb-weapp-img/data-img/generalize3.png'
            },
            {
              label: '直推店',
              value: this.promoteForm.oneShareShopCount
                ? this.promoteForm.oneShareShopCount
                : 0,
              img:
                'https://akk.028wkf.cn/kdb-weapp-img/data-img/generalize11.png'
            },
            {
              label: '间推店',
              value: this.promoteForm.twoShareShopCount
                ? this.promoteForm.twoShareShopCount
                : 0,
              img:
                'https://akk.028wkf.cn/kdb-weapp-img/data-img/generalize22.png'
            },
            {
              label: '间间推店',
              value: this.promoteForm.threeShareShopCount
                ? this.promoteForm.threeShareShopCount
                : 0,
              img:
                'https://akk.028wkf.cn/kdb-weapp-img/data-img/generalize33.png'
            }
          ]
        }
      ]
    },
    checkboxList () {
      const vm = this
      return [
        {
          label: '营收数据',
          isCheck: vm.showDataForm.revenue,
          key: 'revenue'
        },
        {
          label: '用户粘度',
          isCheck: vm.showDataForm.viscosity,
          key: 'viscosity'
        },
        {
          label: '推广数据',
          isCheck: vm.showDataForm.generalize,
          key: 'generalize'
        }
      ]
    },
    themeImg () {
      let appId = this.$store.state.appId
      if (appId !== 'wx657f1b2fb50b5be3') {
        return 'https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/img/bg_home.png'
      } else {
        return 'https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/img/bg_home2.png'
      }
    }
  },
  watch: {},
  created () {},
  mounted () {},
  onShow () {
    this.getShopIdentityParams()
    this.getSalesCountDay()
    this.rebateASalesCountDay()
    this.shopCollectionCount()
    this.shopEvaluationCount()
    this.getNewShareDateCount()
    wx.hideTabBar()
  },
  methods: {
    callClick () {
      const vm = this
      vm
        .$dialog('400-888-5115', '客服热线', '#000', '#6370fd', '拨打', '取消')
        .then(() => {})
        .catch(() => {
          wx.makePhoneCall({
            phoneNumber: '400-888-5115'
          })
        })
    },
    handleLinkNew () {
      this.$router.push('/pages/mine/inform/index/main')
    },
    orderLinkClick (tab) {
      const vm = this
      if (vm.shopIdentity === 'PERSONAL') {
        vm.$toast('创业宝不能使用此功能，请先升级宝主身份。')
      } else {
        vm.$router.push(`/pages/shop-management/shop-order/main?val=${tab}`)
      }
    },
    navLinkClick (item) {
      const vm = this
      if (item.isJurisdiction) {
        vm.$router.push(`${item.link}`)
      } else {
        vm.$toast('创业宝不能使用此功能，请先升级宝主身份。')
      }
    },
    linkDataClick (key, isClick) {
      if (isClick) {
        this.$router.push(`/pages/data-analyze/data-echarts/main?type=${key}`)
      }
    },
    onSwitchChange (e) {
      const vm = this
      let value = e.mp.detail.value
      vm.onOff = value
      if (value) {
        vm.$cookie.set('show-data', true)
      } else {
        vm.$cookie.set('show-data', false)
      }
    },
    addDataClick () {
      const vm = this
      vm.isShowAddData = true
    },
    handleFruitChange (e) {
      const vm = this
      for (let i = 0; i < vm.checkboxList.length; i++) {
        if (e.mp.detail.value === vm.checkboxList[i].label) {
          for (let key in vm.showDataForm) {
            if (key === vm.checkboxList[i].key) {
              vm.showDataForm[key] = !vm.showDataForm[key]
            }
          }
          break
        }
      }
    },
    affirmShowDataClick () {
      const vm = this
      vm.$cookie.set('show-data-form', vm.showDataForm)
      vm.isShowAddData = false
    },
    buyMarketingLinkClick () {
      this.$router.push('/pages/shop-management/marketing-buy-tool/main')
    },
    initOrderCount () {
      const vm = this
      let list = vm.orderType.map(_ => _.key)
      list.forEach(_ => {
        vm.shopOrderCount(_)
      })
    },
    requestInfo () {
      const vm = this
      vm.initOrderCount()
      // vm.getSalesCountDay()
      // vm.rebateASalesCountDay()
      // vm.shopEvaluationCount()
      // vm.shopCollectionCount()
      // vm.getNewShareDateCount()
      // this.getNewCustomerTotal()
      if (vm.$cookie.get('show-data')) {
        vm.onOff = true
      } else {
        vm.onOff = false
        vm.$cookie.set('show-data', false)
      }
      if (vm.$cookie.get('show-data-form')) {
        vm.showDataForm = vm.$cookie.get('show-data-form')
      } else {
        vm.showDataForm = {
          revenue: false,
          viscosity: false,
          generalize: false
        }
        vm.$cookie.set('show-data-form', vm.showDataForm)
      }
    },
    /** api **/
    getShopIdentityParams () {
      const vm = this
      FIND_SHOP_BASE_INFO(vm.account.shopId).then(r => {
        if (r.data.code === '0') {
          let { shopIdentity } = r.data.data
          vm.shopIdentity = shopIdentity
          vm.requestInfo()
        } else if (r.data.code === '000040') {
          vm.$alert('登录失败，请重新登录', '').then(() => {
            let loginState = vm.$cookie.get('loginState')
            let isOneClickDis = vm.$cookie.get('isOneClickDis')
            vm.$cookie.clear()
            vm.$cookie.set('loginState', loginState)
            vm.$cookie.set('isOneClickDis', isOneClickDis)
            vm.$router.new('/pages/login/login/main')
          })
        } else {
          vm.$toast(r.data.message)
        }
      })
    },
    shopOrderCount (state) {
      const vm = this
      let params = {
        shopId: vm.account.shopId,
        state
      }
      FIND_SHOP_ORDER_PAGE(params, 1, 1)
        .then(r => {
          if (r.data.code === '0') {
            vm.orderCountForm[state] = r.data.data.total
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    getSalesCountDay () {
      const vm = this
      let day = dateFormatter('yyyy-MM-dd', new Date())
      let params = {
        shopId: vm.account.shopId,
        state: '3'
      }
      params.orderDateStart = `1970-01-01 00:00:00`
      params.orderDateEnd = `${day} 23:59:59`
      SHOP_SALES_COUNT_DAY(params)
        .then(r => {
          if (r.data.code === '0') {
            let arr = r.data.data
            let val = arr.reduce((acc, _) => {
              acc += _.saleAmount
              return acc
            }, 0)
            let num = arr.reduce((acc, _) => {
              acc += _.saleNum
              return acc
            }, 0)
            // arr.forEach(_ => {
            //   _.saleAmount = _.saleAmount.toFixed(2)
            // })
            vm.dataForm.orderAmount = val.toFixed(2)
            vm.dataForm.orderNum = num
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    rebateASalesCountDay () {
      const vm = this
      let params = {
        relateId: vm.account.shopId,
        identity: 'SHOP',
        state: '1',
        type: '4'
      }
      let day = dateFormatter('yyyy-MM-dd', new Date())
      params.createDateStart = `1970-01-01 00:00:00`
      params.createDateEnd = `${day} 23:59:59`
      COUNT_MONTHLY_REBATE_API_DAY(params)
        .then(r => {
          if (r.data.code === '0') {
            let arr = r.data.data
            let val = arr.reduce((acc, _) => {
              acc += _.amount * 0.01 + _.point * 0.0001
              return acc
            }, 0)
            vm.dataForm.rebateAmount = val.toFixed(2)
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    }, // 返佣金额（固定了的每天）
    shopEvaluationCount () {
      const vm = this
      SHOP_EVALUATION_COUNT(vm.account.shopId)
        .then(r => {
          if (r.data.code === '0') {
            let { shopAssessAvg } = r.data.data
            vm.countForm.shopAssessAvg = shopAssessAvg
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    }, // 评分率
    shopCollectionCount () {
      const vm = this
      SHOP_COLLECTION_COUNT(vm.account.shopId)
        .then(r => {
          if (r.data.code === '0') {
            vm.countForm.collect = r.data.data
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    }, // 收藏数
    getNewShareDateCount () {
      const vm = this
      NEW_SHARE_DATA_COUNT(vm.account.shopId)
        .then(r => {
          if (r.data.code === '0') {
            vm.promoteForm = r.data.data
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    getNewCustomerTotal () {
      const vm = this
      let params = {
        shopId: vm.account.shopId
      }
      NEW_CUSTOMER_TOTAL(params)
        .then(r => {
          if (r.data.code === '0') {
            console.log(r.data.data)
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
@import 'static/styles/color.scss';
.onHeight {
  height: auto;
}
.offHeight {
  height: 100vh;
}
.content {
  width: 100%;
  background: #f2f3f5;
  > .top {
    width: 100%;
    height: 124px;
    background: linear-gradient(to right, $new-dark-blue, $new-light-blue);
    position: relative;
    > .btn-box {
      width: 90%;
      height: 34px;
      margin: auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      > img {
        width: 20px;
        height: 20px;
        display: block;
      }
    }
    > .order-link {
      display: flex;
      align-items: center;
      justify-content: space-between;
      > div {
        width: 25%;
        height: 45px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        color: #fff;
        font-size: 13px;
        margin-top: 15px;
        > p {
          font-weight: 600;
        }
      }
    }
    > .bottom {
      width: 95%;
      height: 30px;
      background: #fff;
      border-radius: 10px;
      display: flex;
      align-items: center;
      font-size: 13px;
      line-height: 13px;
      position: absolute;
      left: 50%;
      bottom: calc(-30px / 2);
      transform: translate(-50%, 0);
      > .icon {
        margin: 0 10px;
      }
      > div {
        padding-left: 10px;
        border-left: 1px solid #dcdcdc;
      }
    }
  }
  > .quick {
    width: 95%;
    margin: auto;
    background: #fff;
    border-radius: 10px;
    padding-bottom: 30px;
    > div {
      width: 95%;
      margin: 30px auto 0;
      > .hint {
        font-size: 14px;
        line-height: 40px;
      }
      > .list {
        width: 95%;
        margin: 15px auto 0;
        display: flex;
        align-items: center;
        justify-content: center;
        > div {
          width: 33.33%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          > img {
            width: 40px;
            height: 40px;
            border-radius: 50px;
          }
          > span {
            font-size: 13px;
          }
        }
      }
    }
  }
  .switch-box {
    width: 95%;
    height: 45px;
    margin: auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: relative;
    > img {
      width: 75px;
      height: 75px;
      position: absolute;
      left: 0;
      top: -13px;
    }
    .i-switch-checked {
      background: #000;
    }
  }
  > .is-switch-show-box {
    > .checkbox-box {
      width: 100%;
      position: fixed;
      background: #fff;
      bottom: 0;
      z-index: 10000;
      > div {
        width: 35%;
        margin: auto;
      }
      > .btn {
        width: 100%;
        height: 50px;
        line-height: 50px;
        border-radius: 0;
        border: 0;
        background: #fff;
        color: #000;
        font-size: 14px;
        margin-top: 15px;
      }
    }
    > .zz {
      position: fixed;
      z-index: 2;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      background-color: #000000;
      opacity: 0.3;
    }
    > .data-list {
      width: 95%;
      margin: auto;
      border-radius: 10px;
      > div {
        border-radius: 10px;
        background: #fff;
        margin-bottom: 15px;
        padding-bottom: 10px;
        > .top {
          display: flex;
          align-items: center;
          > img {
            width: 20px;
            height: 20px;
            border-radius: 50px;
            margin: 0 10px 0 3px;
          }
          > span {
            font-size: 14px;
            line-height: 40px;
          }
        }
        > .dataContent {
          width: 100%;
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          > div {
            width: 33.33%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
            > img {
              width: 18px;
              height: 18px;
              margin-right: 10px;
            }
            > div {
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: space-between;
              color: #000;
              width: 60px;
              > p {
                font-size: 16px;
                font-weight: 600;
              }
              span {
                font-size: 12px;
              }
            }
          }
        }
      }
    }
    > .add-data-btn {
      width: 95%;
      height: 90px;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: #fff;
      border-radius: 10px;
      > p {
        width: 32px;
        height: 32px;
        border-radius: 6px;
        background: #f2f2f2;
        color: #b2b2b2;
        line-height: 32px;
        text-align: center;
        font-size: 30px;
        margin-bottom: 10px;
      }
      > span {
        font-size: 13px;
        line-height: 13px;
        color: #afafaf;
      }
    }
  }
  > .toll-link {
    width: 95%;
    height: 90px;
    display: block;
    margin: auto;
    margin-top: 15px;
    border-radius: 10px;
  }
  > .kong {
    height: 60px;
  }
}
</style>